/*
 * Bee Monitor
 * Author: Pim van Gennip (pim@iconize.nl)
 *
 * Primary-color: 	#F8BA31; rgba(248, 186, 49, 1);
 * Secondary-color: #F29100; rgba(242, 145, 0, 1);
 */


ul.sensor {
	list-style: none;
	margin: 0;
	padding: 0;
}
	ul.sensor li {
		display: block;
		width: 100%;
		min-height: 40px;
		padding: 10px;
		margin-bottom: 10px;
		background-color: #fff; 
		border-radius: 7px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}


.hive-container{
	width: 100%;
	height: 100%;
}
	.hive{
		position: absolute;
		display: block;
		bottom: 0;
		height: 100%;
		width: 80%;
	    left: 50%;
	    min-width: 360px;
	    max-width: 600px;
		min-height: 600px;
		max-height: 650px;
	    transform: translateX(-50%);
		background-image:url(/img/hive_front.svg);
		background-size: contain;
		background-position: bottom;
		background-repeat:no-repeat;
	}

	.hive .hive-content{
		position: absolute;
		display: block;
		bottom: 13%;
		height: 70%;
		width: 75%;
		max-width: 450px;
		max-height: 395px;
	    left: 50%;
	    transform: translateX(-50%);
	    font-size: 22px;
	}

		.hive.spaarkast{
			background-image:url(/img/hive_front.svg);
		}

	.hive-content .measurement{
		position: absolute;
		width: 100%;
		height: 40px;
		top: 8%;
		padding: 0px;
	}

	.hive-content .chart-holder{
		position: absolute;
		width: 100%;
		height: 40%;
		bottom: 10%;
		padding: 0px;
	}
		.hive-content .chart-holder .chart{
			position: absolute;
			bottom: 0;
		}

		.measurement span{
			display: inline-block;
			position: relative;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.measurement span.icn{
			margin-right: 5px;
		} 

		.measurement span.name{
			width: calc( 100% - 130px );
		} 
			.hive-content .measurement span.name{
				width: calc( 100% - 150px );
			} 

		.measurement span.value{
			width: 60px;
			margin-right: 3px;
			text-align: right;
			font-weight: bold;
		}
			.hive-content .measurement span.value{
				width: 70px;
			} 

		.measurement span.unit{
			width: 40px;
		}
			.hive-content .measurement span.unit{
				width: 40px;
			} 



.icn {
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
}

.icn.settigs {
	background-image: url(/img/icn_settings.svg);
}
.icn.temperature {
	background-image:url(/img/icn_temp.svg);
}
.icn.humidity {
	background-image:url(/img/icn_rh.svg);
}
.icn.sound {
	background-image:url(/img/icn_sound.svg);
}
.icn.rainfall {
	background-image:url(/img/icn_rain.svg);
}
.icn.sun {
	background-image:url(/img/icn_sun.svg);
}
.icn.wind {
	background-image:url(/img/icn_wind.svg);
}
.icn.weight, .icn.weight_kg, .icn.weight_kg_corrected, .icn.weight_combined_kg {
	background-image:url(/img/icn_weight.svg);
}
.icn.flight_activity {
	background-image:url(/img/icn_vliegactiviteit.svg);
}
.icn.bee, .icn.sound_flying_adult, .icn.bee_count_in, .icn.bee_count_out {
	background-image:url(/img/icn_bee.svg);
}
.icn.alert {
	background-image:url(/img/icn_alert.svg);
}
.icn.air_pressure, .icn.lat, .icn.lon {
	background-image:url(/img/icn_cloud.svg);
}
.icn.bat_volt {
	background-image:url(/img/icn_bat.svg);
}
.icn.sound_fanning_4days, .icn.sound_fanning_6days, .icn.sound_fanning_9days, .icn.sound_total{
	background-image:url(/img/icn_sound.svg);
}

.btn {
	display:inline-block;
	border:none;
	margin:0px;
	border-radius:10px;
	font-weight:normal;
	color:#FFF;
	text-decoration:none;
	padding:15px;
	line-height:15px;
	text-transform:uppercase;
	background:#555;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
	border: 1px solid #444;
}


	.btn.disabled {
		opacity:0.5;
		pointer-events:none;
	}

	.btn.forgot-password-btn {
		background:transparent;
		color:#666;
		font-weight:normal;
		text-decoration:underline;
		text-align:right;
		margin:0px;
		padding-bottom:0px;
		text-transform:none;
		box-shadow: none;
	}

	.btn.loading,
	.btn.btn-primary.loading {
		text-indent:110%;
		overflow:hidden;
		white-space:nowrap;
		position:relative;
	}

	.btn.loading::after,
	.btn.btn-primary.loading::after {
		display:inline-block;
		width:35px;
		height:35px;
		background-image:url(/img/loading_white.svg);
		background-size:20px;
		background-position:center;
		background-repeat:no-repeat;
		content:"";
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		-webkit-transform:translateX(-50%);
		margin-top:-10px;
	}



	.btn.btn-primary {
		background:#F29100;
	}

	.btn.btn-full-width {
		width: 100%;
	}

	.btn.prev, 
	.btn.next {
		width:40px;
		height:40px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		font-size:0px;
		background-size:100% 100%;
		background-repeat:no-repeat;
		background-color:transparent;
		border: none;
		box-shadow: none;
	}

		.btn.prev { background-image:url(/img/icn_arrow_left.svg);}
		.btn.next { background-image:url(/img/icn_arrow_right.svg); }




	.btn.icon-btn {
		width:27px;
		height:27px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		font-size:0px;
		background:linear-gradient(to right, #FFF, #E6E6E6);
		border-radius:25px;
		border:1px solid #FFF;
		box-shadow:0px 2px 5px rgba(0,0,0,0.2);
	}
		.btn.icon-btn::after {
			display:inline-block;
			width:19px;
			height:19px;
			content:"";
			background-repeat:no-repeat;
			background-size:100% 100%;
			font-size:0px;
			margin-top:-22px;
			float:left;
			margin-left:-7px;
		}

		
		.btn.icon-btn.add::after {
			background-image:url(/img/icons/add.svg);
		}
		.btn.icon-btn.info::after {
			background-image:url(/img/icons/info.svg);
		}
		.btn.icon-btn.close::after {
			background-image:url(/img/icons/close.svg);
		}


	
	.btn.icon-btn.next,
	.btn.icon-btn.prev {
		width:40px;
		height:40px;
		border:none;
		border-radius:0px;
		padding:0px;
		margin:0px;
		box-shadow:none;
		background-size:100%;
		background-position:center;
		background-repeat:no-repeat;
		z-index: 1500;

	}


		.btn.icon-btn.next {
			background-image:url(/img/next_white.svg);
			margin-right: 10px;
		}
		.btn.icon-btn.prev {
			background-image:url(/img/previous_white.svg);
			margin-left: 10px;
		}



	.btn.label-btn {
		text-align:left;
		padding-top:12px;
	}

		.btn.label-btn::after {
			display:inline-block;
			width:19px;
			height:19px;
			content:"";
			background-repeat:no-repeat;
			background-size:100% 100%;
			font-size:0px;
			float:left;
			margin-right:8px;
			margin-top:-2px;
		}


	.btn.label-btn.remove::after {
		background-image:url(/img/icons/remove.svg);
	}


	.btn.label-btn.reset::after {
		background-image:url(/img/icons/reset.svg);
	}

	.btn.label-btn.wifi::after {
		background-image:url(/img/icons/wifi.svg);
	}

	.btn.label-btn.shutdown::after {
		background-image:url(/img/icons/shutdown.svg);
	}


	.btn.label-btn.settings::after {
		background-image:url(/img/icons/settings_white.svg);
	}

	.btn.label-btn.video::after {
		background-image:url(/img/icons/camera_white.svg);
	}

	.btn.label-btn.play::after {
		background-image:url(/img/icons/play_white.svg);
	}

	.btn.label-btn.photo::after {
		background-image:url(/img/icons/photo.svg);
	}


	.btn.label-btn.calibrate::after {
		background-image:url(/img/icons/reset_white.svg);
	}



div.alert {
    border-radius:10px;
    padding:10px 20px;
    font-weight:bold;
    color:#FF0000;
    margin-bottom:20px;
    background-color:rgba(242,242,242,0.6);
}
    div.alert p {
        margin:0px;
        padding:0px;
    }

    div.alert.alert-success {
        color:#61d60a;
    }




.view-header .menu-btn.icon {
	display:inline-block;
	width:30px;
	height:30px;
	text-indent:100%;
	margin:0px;
	padding:0px;
	margin-right: 20px;
	margin-left: 20px;	
	white-space:nowrap;
	background-repeat:no-repeat;
	background-position:center;
	background-color: transparent;
	align-self: center;
}

.icon {
	display:inline-block;
	width:30px;
	height:30px;
	overflow:hidden;
	text-indent:100%;
	margin:0px;
	padding:0px;	
	white-space:nowrap;
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-color: transparent;
}


	.icon.check,
	.icon.cross {
		border-radius:20px;
		background-size:80%;
	}



	.icon.back {	background-image:url(/img/icn_arrow_left.svg);	}
	.icon.menu {	background-image:url(/img/icons/menu.svg); }
	.icon.settings {	background-image:url(/img/icons/settings.svg);	}
	.icon.alert {	background-image:url(/img/icn_alert.svg);	}
	.icon.check {	background-image:url(/img/icons/radic.svg); background-color:rgba(248, 186, 49, 1);	}
	.icon.cross {	background-image:url(/img/icons/cross.svg); background-color:#e1001a;	}

	.icon.cloudy {	background-image:url(/img/icons/weather/cloudy.svg);	}





.btn-group {
	margin:0px;
	padding:0px;
	display: flex;
    display: -webkit-flex;
    justify-content:center;
    -webkit-justify-content:center;
    flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
}

	.btn-group.settings {
		overflow:hidden;
		width:auto;
		padding-bottom:5px;
	}

		.btn-group.settings .btn {
			width:auto;
			white-space:nowrap;
			background:transparent;
			color:#666666;
			text-decoration:underline;
			margin:0px 10px;
		}

			.btn-group.settings .btn.label-btn::before {
				width:20px;
				height:20px;
				content:"|";
				position:absolute;
				margin-left:-48px;
				color:rgba(0,0,0,0.3);
				font-weight:normal;
			}

			.btn-group.settings .btn.label-btn:first-child::before {
				display:none;
			} 



		.btn-group.settings .btn.btn-primary {
			color:#FFF;
			background:rgba(248, 186, 49, 1);
			text-decoration:none;
		}



		.btn-group .title {
			display:block;
			text-transform:uppercase;
			width:100%;
			flex:1 0 auto;
			-webkit-flex:1 0 auto;
			font-weight:bold;
			font-size:18px;
		}




	.connection-status h2 {
		margin:0px;
		padding:0px;
		font-size:18px;
		text-transform:uppercase;
		margin-bottom:10px;
	}


	.connection-status .status {
		display:flex;
		display:-webkit-flex;
		jusitfy-content:flex-start;
		-webkit-justify-content:flex-start;
	}

	.connection-status span {
		display:block;
		padding-top:5px;
		padding-left:10px;
		font-weight:bold;
	}




.ping-status {
	position:absolute;
	transform:translateX(220px) translateY(-28px);
	-webkit-transform:translateX(220px) translateY(-28px);
}


.switch.disabled small {
	box-shadow:none;
	border:1px solid rgba(0,0,0,0.1);
}


.switch {
	width:100px;
	height:36px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
	.switch.checked {
		background:#6EAD2F;
		border-color:#6EAD2F;
	}


	.switch small {
		height:30px;
		width:30px;
		top:2px;
		left:2px;
	}

	.switch.checked small {
		left:100%;
		margin-left:-31px;
	}


	.switch .switch-text {
		font-family:'DinPro';
		font-size:15px;
		text-transform:uppercase;
		font-weight:bold;
	}
	.switch .switch-text .off {
		color:#666666;
	}


		.switch .on,
		.switch .off {
			top:20%;
		}


label .switch .on,
label .switch .off {
	top:15%;
}

.switch.manual {
	width:150px;
}






selector {
	overflow:hidden;
	display:block;
	width:auto;
}

	selector .selectors {
		display:flex;
		display:-webkit-flex;
		justify-content:space-between;
		-webkit-justify-content:space-between;
		-webkit-column-count: 4;
	    column-count: 4;
	    flex-flow: row wrap;
	    -webkit-flex-flow: row wrap;
	    width:200px;
	}

		selector .selectors .item {
			height:30px;
			overflow:hidden;
			width:50px;
			-webkit-flex-basis:50px;
			flex-basis:50px;
			border:1px solid rgba(0,0,0,0.2);
			border-right:none;
		}

			selector .selectors .item label {
				font-weight:bold;
				text-align:center;
				padding-top:2px;
				pointer-events:none;
				width:50px;
				position:relative;
			}
				selector .selectors .item.checked label {
					color:#FFF;
				}


			selector .selectors .item input {
				appearance:none;
				-webkit-appearance:none;
				display:block;
				border-radius:0px;
				background:#FFF;
				border:none;
				width:100%;
				height:100%;
				margin-top:-27px;
			}
				selector .selectors .item.checked input {
					background-color:rgba(248, 186, 49, 1);
				}


			selector .selectors .item:nth-child(5),
			selector .selectors .item:nth-child(6),
			selector .selectors .item:nth-child(7),
			selector .selectors .item:nth-child(8) {
				border-top:none;
			}

			selector .selectors .item:nth-child(1) {
				border-radius:10px 0px 0px 0px;
			}
			selector .selectors .item:nth-child(4) {
				border-radius:0px 10px 0px 0px;
				border-right:1px solid rgba(0,0,0,0.2);
			}
			selector .selectors .item:nth-child(5) {
				border-radius:0px 0px 0px 10px;
			}
			selector .selectors .item:nth-child(8) {
				border-radius:0px 0px 10px 0px;
				border-right:1px solid rgba(0,0,0,0.2);
			}



.tab-bar-wrapper {
	display:flex;
	display:-webkit-flex;
	justify-content:center;
	-webkit-justify-content:center;
}


menu.tab-bar {
	overflow:hidden;
	margin:0px;
	padding:0px;
	font-size:0px;
	display:flex;
	display:-webkit-flex;
	align-items:center;
	-webkit-align-items:center;
	height:50px;
}
	menu.tab-bar .btn {
		margin:0px;
		padding:0px;
		height:35px;
		border:1px solid #666;
		border-radius:0px;
		border-right:none;
		padding:9px 20px;
		color:#666;
		background:transparent;
	}
	menu.tab-bar .btn:first-child {
		border-radius:10px 0px 0px 10px;
	}
	menu.tab-bar .btn:last-child {
		border-radius:0px 10px 10px 0px;
		border-right:1px solid #666;
	}

	menu.tab-bar .btn.active {
		color:#FFF;
		background-color:#666;
	}


		menu.tab-bar.primary .btn {
			border:1px solid #333333;
			border-right:none;
		}

			menu.tab-bar.primary .btn:last-child {
				border-right:1px solid #333333;
			}

			menu.tab-bar.primary .btn.active {
				color:#FFF;
				background-color: #fff;
			}




	.tab-content {
		display:none;
		justify-content:space-between;
		-webkit-justify-content:space-between;
		flex-wrap:wrap;
		-webkit-flex-wrap:wrap;
		display:flex;
		display:-webkit-flex;
		background:#FFF;
		border-radius:10px;
		padding:10px 20px;
		margin-top:20px;
	}








rn-stepper {
	display:flex;
	display:-webkit-flex;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	overflow:hidden;
	width:100%;
}

	rn-stepper .btn,
	form rn-stepper .btn {
		background:rgba(248, 186, 49, 1);
		border:none;
		width:50px;
		height:40px;
		display:block;
		font-size:26px;
		color:#FFF;
		font-weight:bold;
		border:1px solid rgba(0,0,0,0.3);
	}

		rn-stepper .btn:first-child {
			border-radius:5px 0px 0px 5px;
			border-right:none;
		}

		rn-stepper .btn:last-child {
			border-radius:0px 5px 5px 0px;
			border-left:none;
		}


	rn-stepper input {
		border:none;
		border-radius:0px;
		width:auto;
		min-width:0px;
		text-align:center;
		margin:0px;
		font-size:18px;
		padding:5px 0px;
		border:1px solid rgba(0,0,0,0.2);
		border-left:none;
		border-right:none;
	}
	








